<template>
  <div>
    v-model双向绑定：
    <span>{{message}}</span>
    <el-input v-model="message" />

    <input type="text"
           :value="message"
           @input="e=> message = e.target.value"
           placeholder="edit me" />

    <div>
      <span>{{ ball }}</span><br/>
      <input type="checkbox" value="basketball" @change="handleChange"/>篮球
      <input type="checkbox" value="football" @change="handleChange"/>足球
    </div>
    <h1>接受父组件传递过来的值：{{modelValue}}</h1>
    <el-button @click="add">点击</el-button>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue:{
    type: Number,
    default: 0
  }
})
const emit  = defineEmits(['update:modelValue'])
const message = ref('')
const ball = ref([])

const handleChange= (e) => {
  console.log(e.target)
  console.log(e.target.value)
  if(e.target.checked){
    ball.value.push(e.target.value)
  }else{
    ball.value = ball.value.filter(item => item !== e.target.value)
  }
}

const add = () => {
  emit('update:modelValue', props.modelValue+1)
  console.log(props.modelValue)
}
</script>

<style scoped>

</style>
